import styled from 'styled-components';
import { useParams, useNavigate } from 'react-router-dom';
import React, { CSSProperties, FC, useCallback, useEffect, useState } from 'react';
import { PlusOutlined, LeftOutlined, LoadingOutlined } from '@ant-design/icons';

import { TopHeader } from '@/components';
import { ProjectPanel } from './components';
import { Project, ProjectApplication, ProjectApplicationType } from '@/services/local';
import { PROJECT_APPLICATION_CLASS_IDENTIFIER, PROJECT_CLASS_IDENTIFIER } from '@/services/constants';
import { dsFindOne, ComparsionOperator } from '@/services/local';
import { ApplicationAgentPanel, ApplicationG01ServerPanel } from './components/application';
import { Button } from 'antd';
import { ChatPage } from '../chat';

export interface ProjectApplicationPreviewPageProps {
    style?: CSSProperties;
}

export const ProjectApplicationPreviewPage: FC<ProjectApplicationPreviewPageProps> = (props) => {
    const params = useParams();

    const navigate = useNavigate();

    const [loading, setLoading] = useState<boolean>(false);

    const [activeKey, setActiveKey] = useState<string>('');

    const [version, setVersion] = useState<number>(0);

    const [projectApplication, setProjectApplication] = useState<ProjectApplication | null>(null);

    useEffect(() => {
        dsFindOne(0, PROJECT_APPLICATION_CLASS_IDENTIFIER, {
            attributes: [
                {
                    name: 'identifier',
                    operator: ComparsionOperator.Equal,
                    value: params.identifier
                }
            ]
        }).then((app) => {
            console.log(app);
            setProjectApplication(app);
        }).catch((err) => {
            console.error(err);
        });

    }, [params.identifier]);
    return <Container>
        <Header>
            <TopHeader leftButton={<Button type={'text'} onClick={async () => {
                navigate('/workspaces');
            }}><LeftOutlined /></Button>} items={[
                {
                    key: projectApplication?.identifier,
                    label: projectApplication?.title

                }
            ]} activeKey={activeKey} onChange={async (key: string) => {
                setActiveKey(key);
            }}></TopHeader>
        </Header>
        <Content>
            {
                projectApplication?.application_type === ProjectApplicationType.Agent && <ChatPage isInstalled={false} application={projectApplication}></ChatPage>
            }
            {
                projectApplication?.application_type === ProjectApplicationType.G01Server && <ApplicationG01ServerPanel application={projectApplication}></ApplicationG01ServerPanel>
            }
        </Content>
    </Container>
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
`;
const Header = styled.div`
    min-height: 45px;
    height: 45px;
    width: 100%;
    background-color: #FFFFFF;
    border-bottom: 1px solid #DEDEDE;
    display: flex;
`;

const Content = styled.div`
    flex:  1;
    width: 100%;
    overflow: hidden;
`;

export default ProjectApplicationPreviewPage;